<template>
  <view :class="$style.container" class="relative" @click="openAlertDetail(alertInfo.id)">
    <view :class="$style.background">
      <image :class="$style.image" :src="alertInfo.fmtp" mode="widthFix" lazy-load="true"
        style="width: 100%; z-index: -1; border-radius: 20rpx 20rpx 0 0;"></image>
    </view>

    <view :class="$style.header" class="flex absolute">
      <view :class="$style.media" class="flex items-center justify-around">
        <image src="@/static/images/alarm-statistic/media_number.png" mode="widthFix"
          style="margin-left: 15rpx; width: 32rpx; height: 32rpx;"></image>
        <view :class="$style.media_number"> {{ alertInfo.zysl }} </view>
      </view>
      <view :class="$style.state">{{ alertHandleState[alertInfo.ajczztdm] }}</view>
    </view>

    <view :class="$style.content" class="flex justify-between">
      <view :class="$style.info">
        <view :class="$style.address">{{ alertInfo.ajms }}</view>
        <view :class="$style.detail" class="flex">
          <view :class="$style.type" :style="{ background: alertColor[alertInfo.ajdjdm] }">
            {{ alertLevel[alertInfo.ajdjdm] + ' ' + alertType[alertInfo.ajlxdm] }}
          </view>
          <!-- <view :class="$style.level">{{  }}</view> -->

          <view :class="$style.area">{{ alertInfo.xzqyxx || '南京秦淮' }}</view>
        </view>
      </view>
      <view :class="$style.favorite">
        <!-- <image :class="$style.media" :src="alertInfo.imgUrl" mode="top" style="width: 40rpx; height: 40rpx;"></image> -->
        <!-- 未收藏 -->
        <image :class="$style.media" :src="favoriteImg" mode="widthFix" style="width:32rpx; height: 32rpx;"
          v-show="alertInfo.sfjrsc === 0" @click.stop="favoriteAlertFlag(alertInfo.id, alertInfo.sfjrsc)"></image>

        <!-- 已收藏 -->
        <image :class="$style.media" :src="isFavoriteImg" mode="widthFix" style="width:32rpx; height: 32rpx;"
          v-show="alertInfo.sfjrsc === 1" @click.stop="favoriteAlertFlag(alertInfo.id, alertInfo.sfjrsc)"></image>
        <view :class="$style.number">{{ alertInfo.scsl }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang='ts'>
/***
 * 首页 警情统计模块 中 展示警情列表组件
 * 可以进行收藏
 */
import { insertCollectAlert } from "@/api";
import { alertType, alertLevel } from "@/static";

// import mediaNumberImg from "@/static/images/alarm-statistic/media_number.png";
import isFavoriteImg from "@/static/images/common/isFavorite.png";
import favoriteImg from "@/static/images/common/favorite.png";
import { getLocal } from '@/utils'
import { alertColor } from "@/static";
/**定义数据 */
const alertHandleState = ["处置中", "已结束"];


/**定义 emit 事件 */
const emit = defineEmits(["changeFavoriteState"]);
const openid: any = getLocal('openid')
/**定义 props */
interface Props {
  alertInfo: any;
}
const {
  alertInfo: { },
} = defineProps<Props>();


/** 打开浏览警情 */
function openAlertDetail(id: number) {
  console.log("当前点击警情id", id);
  uni.navigateTo({
    url: "/pages/alarm-overview/index?jqId=" + id + '&alertCard=true',
  });
}

// 点击收藏
function favoriteAlertFlag(id: number | string, state: number | string) {


  // 目前的收藏状态 0 未收藏 1 已收藏
  if (state === 1) {
    // 取消收藏
    state = 0
  } else {
    // 添加收藏
    state = 1
  }

  insertCollectAlert({ jqId: id, sfjrsc: state, zhId: openid })
    .then((res: any) => {
      if (res.result.resultCode == "000000") {
        emit('changeFavoriteState', id)
      }
    })
    .catch((e: any) => {
      console.log(e);
    });

}
</script>

<style lang='less' module>
.container {
  // display: inline-block;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000;
  border-radius: 20rpx;
  margin: 0 0rpx 10rpx 0;

  .background {
    width: 100%;
    overflow: auto;
  }

  .header {
    width: 100%;
    top: 20rpx;
    left: 0;
    align-items: center;
    justify-content: space-between;
    color: #FFFFFF;

    .media {
      width: 90rpx;
      background: rgba(55, 92, 228, 0.6);
      border-radius: 18rpx;
      margin-left: 20rpx;
      padding: 3rpx;
    }

    .media_number {
      font-size: 20rpx;
      color: rgba(255, 255, 255, 0.8);
      margin-right: 25rpx
    }

    .state {
      font-size: 22rpx;
      width: 80rpx;
      background: #fd9327;
      border-radius: 8rpx;
      padding: 5rpx 10rpx;
      margin-right: 20rpx;
      text-align: center;
    }
  }

  .content {
    padding: 10rpx;
    position: relative;
  }

  .detail {
    margin-top: 20rpx;
  }

  .address {
    padding: 0 30rpx 0 0;
  }

  .info {
    font-size: 26rpx;

    .type {
      font-size: 24rpx;
      border-radius: 8px;
      color: #ffffff;
      padding: 0 10rpx;
      text-align: center; 
      margin-right: 20rpx;
    }

    // .level {
    //   font-size: 24rpx;
    //   width: 80rpx;
    //   background: #ffcb4f;
    //   border-radius: 8px;
    //   color: #ffffff;
    //   margin: 0 10rpx;
    //   padding: 0 10rpx;
    //   text-align: center;
    // }

    .area {
      font-size: 22rpx;
    }
  }

  .favorite {
    position: absolute;
    right: 12rpx;
    top: 1rpx;

    .number {
      font-size: 20rpx;
      color: #cccccc;
      display: block;
      width: 100%;
      text-align: center;
    }
  }
}
</style>
